.sideMenu {
  overflow: auto;
  box-shadow: 0px 16px 15px 0 rgba(var(--design-rgba-distant), 0.1);
  height: 100%;
  padding: 10px 0;
  width: 200px;

  @media screen and (max-width: 700px) {
    width: 120px;
  }

  >ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }


  .sideMenuItem {
    height: 40px;
    display: flex;
    flex: none;
    align-items: center;
    padding: 0 10px;
    transition: background 0.1s;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    margin: 0 6px;
    @apply rounded-lg text-ellipsis;

    &:hover {
      // font-size: 18px;
      // padding-left: 16px;
      background-color: rgba(var(--design-rgba-near), 0.2);
    }

    &:active {
      background-color: rgba(var(--design-rgba-near), 0.3);
    }
  }

  .sideMenuItemChecked {
    background-color: rgba(var(--design-rgba-near), 0.2);

  }
}